<template>
	<view class="container">
		<image class="m-backdrop" src="../../static/icon/icon_back1.png" mode="widthFix"></image>
		<view class="m-header">
			<image class="m-backdrop" src="../../static/icon/icon_back1.png" mode="widthFix"></image>
			<view class="g-custom-nav flex-box plr30" :style="{ paddingTop: statusBarHeight + 'px', height: 'calc(90rpx + ' + statusBarHeight + 'px)' }">
				<image @click="back()" class="icon-back mr15" src="../../static/icon/arrow_back.png" mode="aspectFit"></image>
				<!-- #ifdef MP-WEIXIN -->
				<view class="search-box flex-box pl25 pr30">
					<input class="flex-1 fs24 col-3" placeholder="输入搜索关键词" confirm-type="search" @confirm="search" placeholder-class="col-9" />
					<image class="icon-search" src="../../static/icon/icon_search.png" mode="aspectFit"></image>
				</view>
				<!-- #endif -->
				<!-- #ifdef H5 || APP-PLUS -->
				<view class="search-box flex-box pl25 pr30 flex-1">
					<input class="flex-1 fs24 col-3" placeholder="输入搜索关键词" placeholder-class="col-9" />
					<image class="icon-search" src="../../static/icon/icon_search.png" mode="aspectFit"></image>
				</view>
				<!-- #endif -->
			</view>
		</view>
		<!--  -->
		<view class="page-body pr plr30 pb30" :style="{ paddingTop: 'calc(110rpx + ' + statusBarHeight + 'px)' }">
			<view class="offline_course">
				<navigator class="item mb40" :url="'/pages/offline_course_detail/offline_course_detail?course_id='+item.id" hover-class="none" v-for="(item,index) in offlineCourseLists">
					<view class="img-box pr mb25">
						<image :src="item.thumb_image" mode="aspectFill"></image>
						<view class="tc fs20 col-f" :class="(item.state==1 || item.state==2)? 'status1' : 'status2'">{{item.state_text}}</view>
					</view>
					<view class="mb25 fs28 col-black fwb m-ellipsis">{{item.name}}</view>
					<view class="flex-box mb25">
						<view class="g-price1 flex-1 fwb">{{item.salesprice}}</view>
						<image class="icon1 mr10" src="/static/icon/icon_already.png" mode="aspectFit"></image>
						<view class="fs22 col-9">已报名{{item.enroll_count}}人 | 剩余{{item.left_count}}人</view>
					</view>
					<view class="flex-box mb25">
						<image class="icon1 mr20" src="/static/icon/icon_time1.png" mode="aspectFit"></image>
						<view class="fs26 col-3 flex-1">开课时间：{{item.start_time_text}} 至 {{item.end_time_text}}</view>
					</view>
					<view class="flex-box">
						<image class="icon1 mr20" src="/static/icon/icon_location.png" mode="aspectFit"></image>
						<view class="fs26 col-3 flex-1">开课地点：{{item.address}}</view>
					</view>
				</navigator>
				<view class="g-btn3-wrap">
					<view class="g-btn3"  :class="{nomore: offlineCourseMore.nomore == true || offlineCourseMore.loading == true}" @click="fetch">{{offlineCourseMore.text}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const util = require('@/xiluedu/util.js');
export default {
	data() {
		return {
			statusBarHeight: 20,
			q: '',
			offlineCourseLists: [],
			offlineCourseMore: {page:1}
		};
	},
	onLoad() {
		this.statusBarHeight = getApp().globalData.statusBarHeight;
		this.fetch();
	},
	onPullDownRefresh(){
		this.refresh();
		setTimeout(function () {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	methods: {
		back(){
			uni.switchTab({
				url: "../index/index"
			})
		},
		search(e){
			this.q = e.detail.value.trim();
			if(!this.q){
				return false;
			}
			this.refresh()
		},
		
		refresh(){
			this.offlineCourseLists = [];
			this.offlineCourseMore = {page:1};
			this.fetch();
		},
		
		fetch() {
			let q = this.q.trim();
		    util.fetch(this, 'xiluedu.offline_course/lists', {q: q,pagesize:10}, 'offlineCourseMore', 'offlineCourseLists', 'data', data=>{
		    })
		  },
	}
};
</script>

<style scoped>
.offline_course {
	background-color: #fff;
	border-radius: 10rpx 10rpx 0 0;
}
.offline_course .item {
	width: 100%;
}
.offline_course .img-box {
	width: 100%;
	height: 360rpx;
	border-radius: 10rpx;
	overflow: hidden;
}
.offline_course .img-box image {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 10rpx;
}
.offline_course .img-box .status1 {
	position: absolute;
	top: 0;
	left: 0;
	padding: 0 10rpx;
	height: 34rpx;
	border-radius: 10rpx 0 0 0;
	line-height: 34rpx;
	background: linear-gradient(90deg, #d7aa4e, #f4c972);
}
.offline_course .img-box .status2 {
	position: absolute;
	top: 0;
	left: 0;
	padding: 0 10rpx;
	height: 34rpx;
	border-radius: 10rpx 0 0 0;
	line-height: 34rpx;
	background: #d8d8d8;
}
.offline_course .icon1 {
	display: block;
	width: 30rpx;
	height: 30rpx;
}
@media only screen and (min-width: 800px){
	.offline_course{
		border-radius: 30rpx 30rpx 0 0;
	}
	.offline_course .img-box{
		height: 800rpx;
		border-radius: 30rpx;
	}
	.offline_course .status1{
		padding-left: 20rpx!important;
	}
	.offline_course .status2{
		padding-left: 20rpx!important;
	}

}
</style>
